<template>
	<div class="cascader">
		<div class="cascader_title">
			{{!setSelectTabTitle()?"请选择":setSelectTabTitle()['name']}}
		</div>
		<div class="cascader_content">
			<div class="cascader_main">
				<div v-for="(item, index) in options" :key="item.key"  :class="['cascader-item',{'selectTab':item.key==selecKey}]" @click="selectOption(item)">
					<span>{{item[labelField]}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Cascader',
		props: {
			// 级联数据
			options: {
				type: Array,
				required: true,
			},
			value: {
				type: Array,
				default: () => [],
			},
			selecKey:{
				type: String,
				default: '',
			},
			labelField: {
				type: String,
				default: 'name',
			},
			// 自定义 value 字段名
			valueField: {
				type: String,
				default: 'value',
			},
		},
		watch: {
			selecKey(newValue, oldValue) {
				console.log("newValuenewValue",newValue)
				this.setSelectTabTitle()
			}
		},
		methods: {
			selectOption(item){
				this.$emit('change',item.key,item.name,item.type);
				this.$emit('close')
			},
			setSelectTabTitle(){
				if(this.selecKey=='') return ""
			   return	this.options.find((item)=>item.key==this.selecKey)
			}
		
		}
	};
</script>

<style lang="scss" scoped>
	.cascader {
		min-height: 30vh;
		padding: 40px 0px;
	}
	.selectTab{
		    color: #ee0a24;
		    font-weight: 500;
	}
	.cascader_title {
		border-bottom: 1px solid #ddd;
		padding: 5px 20px;
		font-size: 14px;
		font-weight: bold;

		&::after {
			content: "";
			display: block;
			position: relative;
			left:10px;
			bottom: -6px;
			z-index: 1;
			width: 20px;
			height: 4px;
			background-color: #ee0a24;
			border-radius:4px;
		}
	}

	.cascader_content {
		padding:20px;

	}

	.cascader_main {
		display: flex;
		flex-direction: column;
	}

	.cascader-item {
		margin-right: 10px;
		margin-bottom: 10px;
		position: relative;
		font-size: 14px;

	}

	.cascader-header {
		padding: 8px;
		background-color: #f5f5f5;
		cursor: pointer;
		border: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.arrow {
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 6px solid #333;
		margin-left: 8px;
	}

	.cascader-dropdown {
		position: absolute;
		background-color: white;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
		z-index: 100;
		border: 1px solid #ccc;
	}

	.cascader-dropdown li {
		padding: 8px;
		cursor: pointer;
	}

	.cascader-dropdown li.selected {
		background-color: #4caf50;
		color: white;
	}

	.cascader-dropdown li:hover {
		background-color: #ddd;
	}
</style>